<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script src="/js/util.js"></script>
<script>
    window.onload = function () {
        findLoginUser();
        showChannel();
    }
    function findLoginUser() {
        axios.get("/user/findLoginUser").then(resp => {
            var info = resp.data;
            if (info != "") {
                $("faceImg").src = "/face/"+info.face;
                $("usernameSpan").innerHTML = info.username;
                $("emailSpan").innerHTML = info.email;
            } else {
                $("loginStatus").innerHTML = "未登录";
            }
        })
    }

    function showChannel() {
        axios.get("/channel/findAll").then(resp => {
            var info = resp.data;
            var str = "";
            info.forEach(c => {
                str += `<tr>
                        <td><a href="/post.html?channelId=${c.id}"> ${c.name}</a></td>
                        <td>${c.description}</td><td>${c.postNum}</td>
                        </tr>`;
            })
            $("channelData").innerHTML = str;
        })
    }
</script>
<style>div {border: 1px solid;}</style>
<body>
<p>登陆状态与统计</p>
<div id="loginStatus">
    <p>登陆用户</p>
    <img src="" width="50" height="50" id="faceImg">
    用户名：<span id="usernameSpan"></span><br>
    邮箱：<span id="emailSpan"></span>
</div>
<div>
    <p>频道</p>
    <table border="1" width="100%" cellspacing="1">
        <thead>
        <tr>
            <th>频道名称</th>
            <th>频道描述</th>
            <th>主贴数量</th>
        </tr>
        </thead>
        <tbody id="channelData"></tbody>
    </table>
    <div id="channelCut"></div>
</div>
</body>
</html>